<template>
    <div class="h-collapse">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { ref, provide, defineModel, watchEffect } from 'vue'
import type { NameType, CollapseProps } from './types'
import { collapseKey } from './types'

const modelData = defineModel<NameType[]>()
const porps = defineProps<CollapseProps>()

// 定义当前活动面板
const collapseArr = ref<NameType[]>(modelData.value as NameType[])
watchEffect(() => {
    collapseArr.value = modelData.value as NameType[]
})
if (porps.accordion && collapseArr.value.length > 1) {
    console.warn('accordion mode should only have one active item');
}
// 判断改变当前活动面板
const handleCollapseArr = (name: NameType) => {
    if (porps.accordion) {
        collapseArr.value = [collapseArr.value[0] == name ? '' : name]
    } else {
        const isName = collapseArr.value.indexOf(name)
        if (isName > -1) {
            collapseArr.value.splice(isName, 1)
        } else {
            collapseArr.value.push(name)
        }
    }
}

provide(collapseKey, {
    collapseArr,
    handleCollapseArr
})
</script>

<style>
</style>